<#assign module="member"/>

<@override name="header">
<link rel="stylesheet" href="${ctx}/assets/css/datetimepicker.css">
<link rel="stylesheet" href="${ctx}/assets/css/jquery.Jcrop.css">
<style>
	/* autocomplete */
	div.ac {border: 1px solid #ccc;position: absolute;display: none;overflow: auto;background-color: #ffffff;z-index:998;}
	div.ac > ul {margin-top:10px;padding:0;}
	div.ac > ul > li {height:33px;line-height:33px;cursor:pointer;}
	div.ac > ul > li:hover{background:#eee;}
	div.ac > ul > li > div span {padding-left:15px;}
	div.ac > ul > li > div span em {color:red;font-style: normal;}
</style>
</@override>
<@override name="body">


<div class="row">
		<div class="col-md-12 col-lg-12">
		<div class="tabbable"> 
			<div class="tab-content">
			
			    <div class="tab-pane active" id="tab1">
		    		<div class="row margin-top">
						<div class="col-xs-12">
							<div class="table-responsive">
								<div class="panel panel-default">
								
									<div class="panel-heading">
										填写发票信息
									</div>
									<div class="panel-body">
				    				<form class="form-horizontal"  action="${ctx}/receipt/create"  method="post">
				    					 <input type="hidden" id="passengerId" name="passengerId"  />
						  			     <div class="form-group">
						                    <label class="col-sm-3 control-label">客户手机号码：</label>
						                    <div class="col-sm-3">
						                    	<input  class="form-control" id="phone" name="phone" type="text" pattern="\d{11}" placeholder="请输入11位手机号码" title="请输入11位手机号码" required />
						                    </div>
		              					 </div>
							            <div class="form-group">   
							      		 	    <label class="col-sm-3 control-label">客户姓名：</label>
							      		       	<div class="col-sm-3">
								                   	<input class="form-control" id="name" name="name" type="text" required  />
								                </div>
						      		    </div>
		              					 <div class="form-group">   
							      		 	    <label class="col-sm-3 control-label">最大开票额度：</label>
							      		 	    <div class="col-sm-3">
								                   	<input class="form-control"  id="alreadyMoney"  name="alreadyMoney" value="0.00" type="text" readonly= true  />
								                </div>
								                <div class="col-sm-1">元</div>
						      		    </div>
						  			     <div class="form-group">
						                    <label class="col-sm-3 control-label">开票金额：</label>
						                    <div class="col-sm-3">
						                    	<input id="money"  class="form-control"  name="money" type="text" placeholder="请输入大于0的数字" 
						                    	pattern="[0-9]+(.[0-9]{1,3})?" title="数字正确格式:1,1.0,1.00" required />
						                    </div>
						                    <div class="col-sm-1">元</div>
		              					 </div>
						  			     <div class="form-group">
						                    <label class="col-sm-3 control-label">发票类型：</label>
						                    <div class="col-sm-3">
						                    	<span>服务费</span>
						                    </div>
		              					 </div>
		              					  <div class="form-group">
						                    <label class="col-sm-3 control-label">发票编号：</label>
						                    <div class="col-sm-3">
						                    	<input  class="form-control" id="number" name="number" type="text" maxlength="15" placeholder="选填" />
						                    </div>
		              					 </div>
		              					  <div class="form-group">
						                    <label class="col-sm-3 control-label">客户备注：</label>
						                    <div class="col-sm-3">
						                    	<textarea class="form-control" cols="50" id="memo" name="memo" rows="3" placeholder="选填" ></textarea>
						                    </div>
		              					 </div>
		              					 <div class="form-group">
						                    <label class="col-sm-3 control-label">开票备注：</label>
						                    <div class="col-sm-3">
						                    	<textarea class="form-control" cols="50" id="billingDesc" name="billingDesc" rows="3" placeholder="选填" ></textarea>
						                    </div>
		              					 </div>
						                <div class="form-group">
						                	<div class="col-sm-3">
						                	</div>
						                	<div class="col-sm-3">
								                <input  type="button" id="save" class="btn btn-primary" value="保存">
								                <input type="button" class="btn btn-default" onclick="window.location.href = '${ctx}/receipt/list';" value="返回">
							            	</div>
							            </div>
						            </form>
						        	</div>
								</div>
							</div>
						</div>
					</div>
			    </div>
			   
			</div>
		</div>
		</div>
	</div>

</@override>
<@override name="footer">
<script src="${ctx}/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="${ctx}/assets/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/assets/js/jquery.autocomplete.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#phone').AutoComplete({
	        'data': "${ctx}/receipt/getMembers",
			ajaxDataType: 'json',
			ajaxParams:function(keyword){
				return {'phone':$('#phone').val()};
			},
	        'width': 'auto',
	        'async': true,
	        'listStyle': 'custom',
	        'emphasis': false,
	        'matchHandler': function(keyword, data){
	            return true;
	        },
	        'createItemHandler': function(index, data){
	        	return "<span>"+data.name+data.phone+"</span>";
	        },
	        'afterSelectedHandler': function(data){
	        	$('#phone').val(data.phone);
	        	$('#name').val(data.name);
	        	$('#alreadyMoney').val(data.alreadyMoney);
	        	$('#passengerId').val(data.id);
	        }
	    }).AutoComplete('show');
	   
	   $("#phone").bind("change", function(){
	 		var phone=$("#phone").val();
			var isphone=/^\+?\d{3,13}(\-?(\d{6,8}?))?(\-?(\d{4,8}?))*$/; 
			if (!isphone.test(phone)){
				$.scojs_message("电话号码格式不正确", $.scojs_message.TYPE_ERROR);
				$("#phone").val("");
			}
			$('#name').val("");
	    	$('#alreadyMoney').val("0.00");
	    	$('#passengerId').val("");
	    	$('#money').val("");
		});
	   $('#money').blur(function(){
	 		var money=$("#money").val();
			var ismoney=/[0-9]+(.[0-9]{1,3})?/; 
			if (!ismoney.test(money)){
				$.scojs_message("数字格式不正确", $.scojs_message.TYPE_ERROR);
				$("#money").val("");
			}
	   
	  		if(parseFloat($('#money').val())>parseFloat($('#alreadyMoney').val())){
	  		 $.scojs_message("开票金额不能大于最大开票额度", $.scojs_message.TYPE_ERROR);
	  		}
	   });
	   $('#phone').blur(function(){
		    $.ajax({      
		     type:"GET", 
		     url:"${ctx}/receipt/getMember",
			 dataType:"json", 
			 data: {phone:$("#phone").val()},
			 success:function(data){
				 if(data.phone){
				 	$('#phone').val(data.phone);
		        	$('#name').val(data.name);
		        	$('#alreadyMoney').val(data.alreadyMoney);
		        	$('#passengerId').val(data.id);
				 }
			  }
			});
		});
		function  createReceipt(){
			$.post('${ctx}/receipt/create',{'passengerId':$('#passengerId').val(),'phone':$('#phone').val(),'money':$('#money').val(),'memo':$('#memo').val(),'billingDesc':$('#billingDesc').val(),'number':$('#number').val()},function(data){
	           if(data.success){
		           window.location="${ctx}/receipt/list";
	                $.scojs_message(data.message, $.scojs_message.TYPE_OK);
		       }else if(data.success=="false"){
	                $.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
		       }
		    },'json');
		};
		
		 $("#save").click(function(){
		 var phone=$("#phone").val();
			var isphone=/^\+?\d{3,13}(\-?(\d{6,8}?))?(\-?(\d{4,8}?))*$/; 
		 var money=$("#money").val();
			var ismoney=/[0-9]+(.[0-9]{1,3})?/; 
			if (!ismoney.test(money)){
				$.scojs_message("数字格式不正确", $.scojs_message.TYPE_ERROR);
				$("#money").val("");
			}else if (!isphone.test(phone)){
				$.scojs_message("电话号码格式不正确", $.scojs_message.TYPE_ERROR);
				$("#phone").val("");
			}else{
	           createReceipt();
	        }   
	     });
	   
  	});  
</script>
</@override>

<@extends name="../layout.ftl"/>